@extends('layouts.app')

@section('content')

<div class="container-fluid">

    <div class="row justify-content-center">

        <div class="col-md-8">

            <div class="card shadow-lg border-0">

                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">Add New Customer</h4>
                </div>

                <div class="card-body">

                    <form action="{{ route('customers.store') }}" method="POST">
                        @csrf

                        <div class="row">

                            <div class="col-md-6 mb-3">
                                <label>Customer ID</label>
                               <input type="text"
       name="customer_id"
       value="{{ $customerId }}"
       class="form-control"
       readonly>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Customer Name</label>
                                <input type="text"
                                       name="name"
                                       class="form-control"
                                       required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Mobile</label>
                                <input type="text"
                                       name="mobile"
                                       class="form-control"
                                       required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Email</label>
                                <input type="email"
                                       name="email"
                                       class="form-control">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label>Address</label>
                                <input type="text"
                                       name="address"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
    <label>Package</label>

    <select name="package_name"
            id="packageSelect"
            class="form-control"
            required>

        <option value="">Select Package</option>

        @foreach($packages as $package)

            <option
                value="{{ $package->package_name }}"
                data-speed="{{ $package->speed }}"
                data-price="{{ $package->price }}">

                {{ $package->package_name }}
                - {{ $package->speed }}
                - {{ $package->price }} TK

            </option>

        @endforeach

    </select>
</div

                           <div class="col-md-6 mb-3">
    <label>Monthly Bill</label>

    <input type="number"
           name="monthly_bill"
           id="monthlyBill"
           class="form-control">
</div>

<div class="col-md-6 mb-3">
    <label>Package Speed</label>

    <input type="text"
           id="packageSpeed"
           class="form-control"
           readonly>
</div>

                            <div class="col-md-6 mb-3">
                                <label>MikroTik Router</label>

                                <select name="router_id" class="form-control">
                                    <option value="">Select Router</option>

                                    @isset($routers)
                                        @foreach($routers as $router)
                                            <option value="{{ $router->id }}">
                                                {{ $router->router_name }}
                                                ({{ $router->ip_address }})
                                            </option>
                                        @endforeach
                                    @endisset

                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>PPPoE Username</label>

                                <input type="text"
                                       name="pppoe_username"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Join Date</label>

                                <input type="date"
       name="join_date"
       value="{{ date('Y-m-d') }}"
       class="form-control"
       required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>PPPoE Password</label>

                                <input type="text"
                                       name="pppoe_password"
                                       class="form-control">
                            </div>

                        </div>

                        <button type="submit" class="btn btn-success">
                            Save Customer
                        </button>

                        <a href="{{ route('customers.index') }}"
                           class="btn btn-secondary">
                            Back
                        </a>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>


<script>

document.addEventListener('DOMContentLoaded', function () {

    let packageSelect = document.getElementById('packageSelect');

    packageSelect.addEventListener('change', function () {

        let selected =
            this.options[this.selectedIndex];

        let price =
            selected.getAttribute('data-price');

        let speed =
            selected.getAttribute('data-speed');

        document.getElementById('monthlyBill').value =
            price ? price : '';

        document.getElementById('packageSpeed').value =
            speed ? speed : '';

    });

});

</script>

@endsection