@extends('tenant.layouts.master')

@section('breadcrumb')
    @php
        $breadcrumb_items[ __('breadcrumb.home')] = '/';
        $breadcrumb_items[ __('breadcrumb.representatives')] = route('tenant.representatives.representatives.index');
        $breadcrumb_items[ __('breadcrumb.edit')] = '#';
    @endphp

    @include('tenant.layouts.breadcrumb', ['items' => $breadcrumb_items])
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('css/employees/edit.css') }}">
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'representatives.index'])
@endsection

@section('content')
    <div class="row justify-content-center py-5 bg-white">
        <div class="col-10 position-relative" >
            <x-tenant.shared.backward-component :direct-to="__('breadcrumb.representatives')" link="/representatives/representatives" />

            <div>
                <h4 class="mb-4"> @lang('representatives/update.edit_representative')  ( {{ $representative->name }} )</h4>
                <form
                    action="{{ route('tenant.representatives.representatives.update', ['representative' => $representative->id]) }}"
                    method="post" class=" p-4">
                    @method('PUT')
                    @csrf

            <div class="row">
                <div class="col-md-6">
                    <div class="my-2">
                        <label for="name" class="rs"> @lang('representatives/update.name')</label>
                        <input type="text" placeholder="{{__('representatives/create.representative_name')}}" id="name" name="name" class="form-control"
                            value="{{ $representative->name }}" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="my-2">
                        <label for="username" class="rs">  @lang('representatives/update.user_name')</label>
                        <input type="text" placeholder="{{__('representatives/create.user_name')}}" id="username" name="username" class="form-control"
                            value="{{ $representative->username }}" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="my-2">
                        <label for="phone" class="rs">  @lang('representatives/update.phone_number')</label>
                        <input type="number" placeholder="{{__('representatives/create.phone_number')}}" id="phone" name="phone" class="form-control"
                            value="{{ $representative->phone }}" required>
                    </div>
                </div>

                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="commission_rate" class="rs"> @lang('representatives/update.commission_rate') </label>
                                <input type="number" min="0" max="100" id="commission_rate"
                                    placeholder="{{ __('representatives/create.commission_rate') }}" name="commission_rate"
                                    class="form-control" value="{{ $representative->commission_rate }}" required>
                            </div>
                        </div>
                    </div>

            <div class="row">
                {{-- <div class="col-md-4">
                    <label for="representative-type">نوع المندوب</label>
                    <div class="d-flex">
                        <div class="mx-1">
                            <label for="is_saler">مندوب مبيعات</label>
                            <input type="checkbox" id="is_saler" name="is_saler" class="custom-checkbox"
                                {{ $representative->is_saler ? 'checked' : '' }}>
                        </div>

                        <div class="mx-1">
                            <label for="is_collector">مندوب تحصيل</label>
                            <input type="checkbox" id="is_collector" name="is_collector" class="custom-checkbox"
                                {{ $representative->is_collector ? 'checked' : '' }}>
                        </div>

                        <div class="mx-1">
                            <label for="is_delivery">مندوب توصيل</label>
                            <input type="checkbox" id="is_delivery" name="is_delivery" class="custom-checkbox"
                                {{ $representative->is_delivery ? 'checked' : '' }}>
                        </div>

                        <div class="mx-1">
                            <label for="is_cash_van">مندوب cash van</label>
                            <input type="checkbox" id="is_cash_van" name="is_cash_van" class="custom-checkbox"
                                {{ $representative->is_cash_van ? 'checked' : '' }}>
                        </div>
                    </div>
                </div> --}}
                @php
                    $selectedBranchIds = $representative->branch->pluck('branch_id')->toArray();
                    $selectedReceivableIds = $representative->receivable_account->pluck('receivable_id')->toArray();
                @endphp
                <div class="col-md-6">
                    <label for="branch_id" class="rs"> @lang('representatives/update.branch')</label>
                    <select name="branch_id" id="branch_id" required data-selectize>
                        <option value="" disabled>  @lang('representatives/update.select_branch')</option>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}"
                                @foreach ($representative->branch as $selectedBranch)
                                {{ $selectedBranch->id == $branch->id ? 'selected' : '' }} @endforeach>
                                {{ $branch->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="receivable_id" class="rs"> @lang('representatives/update.receivable')</label>
                    <select name="receivable_id[]" id="receivable_id" required multiple data-selectize>
                        <option value="" disabled>  @lang('representatives/update.select_receivable')</option>
                        @foreach ($receivableAccounts as $receivable)
                            <option value="{{ $receivable->id }}"
                                @foreach ($representative->receivable_account as $selectedReceivable)
                            {{ $selectedReceivable->id == $receivable->id ? 'selected' : '' }} @endforeach>
                                {{ $receivable->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="permissions-layout">
                        <div class="modules-container col m-auto">

                            <div class="module-layout mb-4 mix sections-representative">

                                {{-- Sections Of Module - Table --}}
                                <div class="sections-layout">
                                    <table class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <label for="all-sections-representative">@lang('general.all')</label>
                                                    <input type="checkbox" name="representative"
                                                        class="select-all-sections-btn disabled-search custom-checkbox"
                                                        id="all-sections-representative"
                                                        {{ 4 == $sections->count() ? 'checked' : '' }}>
                                                </th>
                                                <th> @lang('representatives/update.section')</th>
                                                <th> @lang('representatives/update.operations')</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @foreach ($sections as $section)
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" name="sections-representative[]"
                                                            id="section-{{ $section->id }}" class="section-checkbox custom-checkbox"
                                                            value="{{ $section->code }}"
                                                            {{ in_array('representativesApp-' . $section->code, $selected_permissions) ? 'checked' : '' }}>
                                                    </td>
                                                    <td>{{ $section->name }}</td>
                                                    <td>
                                                        <div class="functions-layout d-flex align-items-center">
                                                            <label for="all-functions-{{ $section->code }}"
                                                                class="select-all-functions mx-4 btn"
                                                                title="{{__('general.select_deselect_all')}}"> @lang('general.all')</label>
                                                            <input type="checkbox"
                                                                id="all-functions-{{ $section->code }}"
                                                                class="btn select-all-functions-btn mx-1 d-none">

                                                            <div class="d-flex flex-wrap">
                                                                @foreach ($section->functions as $function)
                                                                    <div class="code-function mx-1">
                                                                        <input type="checkbox"
                                                                            name="functions-{{ $section->code }}[]"
                                                                            id="function-{{ $function->id }}"
                                                                            class="function-checkbox custom-checkbox"
                                                                            value="{{ $function->code }}"
                                                                            {{ in_array('representativesApp-' . $section->code . '-' . $function->code, $selected_permissions) ? 'checked' : '' }}>
                                                                        <label
                                                                            for="function-{{ $function->id }}">{{ $function->name }}</label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center my-3">
                        <button type="submit" class="btn orange-btn">@lang('general.edit')</button>
                    </div>

                </form>
            </div>

            <div class="mt-4">
                <hr>
                <h4>@lang('settings/pos/users/edit.change_password')</h4>

                <form method="post" id="changePassword"
                    action="{{ route('tenant.representatives.representatives.change-password', $representative->id) }}">
                    @csrf

                    <div class="row align-items-end">

                        <div class="col-md-4">
                            <div class="my-2">
                                <label for="password">@lang('representatives/update.password')</label>
                                <input type="password" placeholder="{{ __('representatives/create.password') }}"
                                    id="password" name="password" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="my-2">
                                <label for="password_confirmation">@lang('representatives/update.password_confirmation')</label>
                                <input type="password"
                                    placeholder="{{ __('representatives/create.password_confirmation') }}"
                                    id="password_confirmation" name="password_confirmation" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-4 text-end mb-2">
                            <button class="btn orange-btn mt-3">@lang('settings/pos/users/edit.change')</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
@endsection
@push('script')
    <script>
        $(() => {
            // hide operations if is not checked
            $(".select-all-sections-btn").on("change", function() {
                $(this)
                    .closest(".module-layout")
                    .find(".section-checkbox")
                    .prop("checked", $(this).prop("checked"));
                if ($(this).prop("checked")) {
                    $(this)
                        .closest(".module-layout")
                        .find(".functions-layout")
                        .css("opacity", 1);
                } else {
                    $(this)
                        .closest(".module-layout")
                        .find(".functions-layout")
                        .css("opacity", 0);
                }
            });
            // hide/show functions if section-checkbox is checked
            $(".section-checkbox").on("change", function() {
                let checked = $(this).prop("checked");
                if (checked) {
                    $(this)
                        .closest("tr")
                        .find(".function-checkbox")
                        .prop("checked", true)
                        .attr("disabled", false);
                    $(this).closest("tr").find(".functions-layout").css("opacity", 1);
                } else {
                    $(this).closest("tr").find(".function-checkbox").prop("checked", false);
                    $(this).closest("tr").find(".functions-layout").css("opacity", 0);
                }
            });

            // make all functions checked or not based on select-all-functions-btn
            $(".select-all-functions-btn").on("click", function() {
                $(this)
                    .closest(".functions-layout")
                    .find(".function-checkbox")
                    .prop("checked", $(this).prop("checked"));
            });

            // change the style of selected functions
            $(".select-all-functions").on("click", function() {
                $(this).toggleClass("all-functions-selected-btn");
            });
        });
    </script>
@endpush